<template>
  <div>
    <slot name="left" />

    <!--    <el-button v-permission="permission.edit" :disabled="disabledEdit" size="mini" type="primary" icon="el-icon-edit" @click="crud.toEdit(data)" />-->
    <el-tooltip v-permission="permission.edit" class="item" content="编辑" effect="light" placement="top">
      <i class="el-icon-edit opration_icon_btn" style="margin-right: 14px" @click="toEdit(data)" />
    </el-tooltip>
    <slot name="center" />
    <el-tooltip v-permission="permission.del" class="item" content="删除" effect="light" placement="top">
      <el-popover
        v-model="pop"
        v-permission="permission.del"
        placement="top"
        trigger="manual"
        width="180"
        @hide="onPopoverHide"
        @show="onPopoverShow"
      >
        <p>{{ msg }}</p>
        <div style="text-align: right; margin: 0">
          <el-button size="mini" type="text" @click="doCancel">取消</el-button>
          <el-button
            :loading="crud.dataStatus[data.id].delete === 2"
            size="mini"
            type="primary"
            @click="crud.doDelete(data)"
          >确定
          </el-button>
        </div>
        <!--      <el-button slot="reference" :disabled="disabledDle" type="danger" icon="el-icon-delete" size="mini" @click="toDelete" />-->
        <i slot="reference" class="el-icon-delete opration_icon_btn" type="primary" @click="toDelete" />
      </el-popover>
    </el-tooltip>
    <el-tooltip v-if="isShow" v-permission="permission.edit" class="item" content="修改密码" effect="light" placement="top">
      <i class="icon iconfont icon-user" style="margin-right: 14px;color: #008bff" @click="toUpdate(data)" />
    </el-tooltip>
    <slot name="right" />

    <el-dialog
      :before-close="cancel"
      :close-on-click-modal="false"
      :title="title"
      :visible.sync="dialog"
      append-to-body
      width="500px"
      @close="cancel"
    >
      <el-form ref="form" :model="form" :rules="rules" label-width="88px" size="small">
        <el-form-item label="旧密码" prop="oldPass">
          <el-input v-model="form.oldPass" auto-complete="on" style="width: 370px;" type="password" />
        </el-form-item>
        <el-form-item label="新密码" prop="newPass">
          <el-input v-model="form.newPass" auto-complete="on" style="width: 370px;" type="password" />
        </el-form-item>
        <el-form-item label="确认密码" prop="confirmPass">
          <el-input v-model="form.confirmPass" auto-complete="on" style="width: 370px;" type="password" />
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button type="text" @click="cancel">取消</el-button>
        <el-button :loading="loading" type="primary" @click="doSubmit">确认</el-button>
      </div>
    </el-dialog>
  </div>
</template>
<script>
import CRUD, {crud} from '@crud/crud'
import {updatePass} from '@/api/system/user'
import store from '@/store'

export default {
  mixins: [crud()],
  props: {
    data: {
      type: Object,
      required: true
    },
    permission: {
      type: Object,
      required: true
    },
    disabledEdit: {
      type: Boolean,
      default: false
    },
    isShow: {
      type: Boolean,
      default: false
    },
    disabledDle: {
      type: Boolean,
      default: false
    },
    msg: {
      type: String,
      default: '确认删除所选记录吗？'
    }
  },
  data() {
    const confirmPass = (rule, value, callback) => {
      if (value) {
        if (this.form.newPass !== value) {
          callback(new Error('两次输入的密码不一致'))
        } else {
          callback()
        }
      } else {
        callback(new Error('请再次输入密码'))
      }
    }
    return {
      loading: false, dialog: false, pop: false, title: '修改密码', form: { oldPass: '', newPass: '', confirmPass: '' },
      rules: {
        oldPass: [
          { required: true, message: '请输入旧密码', trigger: 'blur' }
        ],
        newPass: [
          { required: true, message: '请输入新密码', trigger: 'blur' },
          { min: 6, max: 20, message: '长度在 6 到 20 个字符', trigger: 'blur' }
        ],
        confirmPass: [
          { required: true, validator: confirmPass, trigger: 'blur' }
        ]
      }
    }
  },
  methods: {
    toUpdate() {
      this.dialog = true
    },
    cancel() {
      this.resetForm()
    },
    doSubmit() {
      this.$refs['form'].validate((valid) => {
        if (valid) {
          this.loading = true
          updatePass(this.form).then(res => {
            this.resetForm()
            this.$notify({
              title: '密码修改成功，请重新登录',
              type: 'success',
              duration: 1500
            })
            setTimeout(() => {
              store.dispatch('LogOut').then(() => {
                location.reload() // 为了重新实例化vue-router对象 避免bug
              })
            }, 1500)
          }).catch(err => {
            this.loading = false
            console.log(err.response.data.message)
          })
        } else {
          return false
        }
      })
    },
    resetForm() {
      this.dialog = false
      this.$refs['form'].resetFields()
      this.form = { oldPass: '', newPass: '', confirmPass: '' }
    },
    doCancel() {
      this.pop = false
      this.crud.cancelDelete(this.data)
    },
    toDelete() {
      this.pop = true
    },
    [CRUD.HOOK.afterDelete](crud, data) {
      if (data === this.data) {
        this.pop = false
      }
    },
    onPopoverShow() {
      setTimeout(() => {
        document.addEventListener('click', this.handleDocumentClick)
      }, 0)
    },
    onPopoverHide() {
      document.removeEventListener('click', this.handleDocumentClick)
    },
    handleDocumentClick(event) {
      this.pop = false
    },
    toEdit(data){
      this.$emit("toEdit",data)
    }
  }
}
</script>
